<template>
	<div class="teaching-affairs" direction="vertical">
		<scOverview></scOverview>
		<div class="teaching-affairs__body mt_10">
			<div class="student">
				<scSection class="student-number" title="学员人数数据" :img-url="imgsList.student_icon">
					<template #title-end>
						<scLegend :legendList="legendStudentNumberList"></scLegend>
					</template>
					<div class="student-number__body">
						<div class="teaching-affairs_tab">
							<scTab v-bind="studentNumberTabData" @onSelect="handleStudentNumber"></scTab>
						</div>
						<scEcharts height="160px" :option="tplStudentNumberBar"></scEcharts>
					</div>
				</scSection>
				<scSection class="student-performance ml_10" title="学员业绩数据" :img-url="imgsList.resource_icon">
					<template #title-end>
						<scLegend :legendList="legendStudentPerformanceLine"></scLegend>
					</template>
					<div class="student-performance__body">
						<div class="teaching-affairs_tab">
							<scTab v-bind="studentPerformanceTabData" @onSelect="handleStudentPerformance"></scTab>
						</div>
						<scEcharts height="160px" :option="tplStudentPerformanceLine"></scEcharts>
					</div>
				</scSection>
			</div>
			<div class="subject mt_10">
				<scSection class="subject-open" title="学科开班数据" :img-url="imgsList.subject_icon">
					<template #title-end>
						<scLegend :legendList="legendSubjectOpenLine"></scLegend>
					</template>
					<div class="student-number__body">
						<div class="teaching-affairs_tab">
							<scTab v-bind="subjectClassOpenTabData" @onSelect="handleSubjectClassOpen"></scTab>
						</div>
						<scEcharts height="185px" :option="tplSubjectOpenClassLine"></scEcharts>
						<div class="line" style="height: 1px; width: 100%; background: #f2f2f2"></div>
						<scEcharts height="185px" :option="tplSubjectPersonNumberBar"></scEcharts>
					</div>
				</scSection>
				<div class="subject-class-cost ml_10">
					<div class="subject-class-cost__top">
						<div class="subject-class-cost__number">
							<scSection title="学科课耗数据" :img-url="imgsList.cost_icon">
								<template #title-end>
									<scLegend :legendList="legendSubjectClassCostNumberLine"></scLegend>
								</template>
								<div class="student-number__body">
									<div class="teaching-affairs_tab">
										<scTab v-bind="subjectCostNumberTabData" @onSelect="handleSubjectCostNumber"></scTab>
									</div>
									<scEcharts height="145px" :option="tplSubjectCostNumberLine"></scEcharts>
								</div>
							</scSection>
						</div>
						<div class="subject-class-cost__hour ml_10">
							<scSection title="学科课耗数据" :img-url="imgsList.cost_icon">
								<template #title-end>
									<scLegend :legendList="legendSubjectClassCostLine"></scLegend>
								</template>
								<div class="student-number__body">
									<div class="teaching-affairs_tab">
										<scTab v-bind="subjectCostHourTabData" @onSelect="handleSubjectCostHour"></scTab>
									</div>
									<scEcharts height="145px" :option="tplSubjectCostHourBar"></scEcharts>
								</div>
							</scSection>
						</div>
					</div>
					<div class="subject-class-cost__bottom mt_10">
						<scSection title="学科课耗数据" :img-url="imgsList.subjectMoney_icon">
							<template #title-end>
								<scLegend :legendList="legendSubjectClassCostLine"></scLegend>
							</template>
							<div class="student-number__body">
								<div class="teaching-affairs_tab">
									<scTab v-bind="subjectCostMoneyTabData" @onSelect="handleSubjectCostMoney"></scTab>
								</div>
								<scEcharts height="145px" :option="tplSubjectCostMoneyBar"></scEcharts>
							</div>
						</scSection>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { reactive, computed } from "vue"
import * as echarts from "echarts"
import scOverview from "@/components/scOverview"
import scSection from "@/components/scSection"
import scLegend from "@/components/scLegend"
import scTab from "@/components/scTab"
import scEcharts from "@/components/scEcharts"
import imgsList from "@/utils/images.js"

const legendStudentNumberList = reactive([
	{ label: "已成交学员", color: "#506EE4", width: "10px" },
	{ label: "交付中学员", color: "#FF7070", width: "10px" },
	{ label: "已交付学员", color: "#1DC9B7", type: "line" }
])
const legendStudentPerformanceLine = reactive([
	{ label: "已成交学员", color: "#506EE4", width: "10px" },
	{ label: "交付中学员", color: "#FF7070", width: "10px" },
	{ label: "已交付学员", color: "#1DC9B7", width: "10px" }
])

const legendSubjectOpenLine = reactive([
	{ label: "计划开班", color: "#FF7070", type: "line" },
	{ label: "正在开班", color: "#506EE4", type: "line" },
	{ label: "已结业班级", color: "#1DC9B7", type: "line" }
])
const legendSubjectClassCostNumberLine = reactive([
	{ label: "总课时", color: "#FF7070", type: "line" },
	{ label: "交付中", color: "#506EE4", type: "line" },
	{ label: "已交付", color: "#1DC9B7", type: "line" }
])

const legendSubjectClassCostLine = reactive([
	{ label: "总课时", color: "#FF7070", type: "solidround", width: "8px", radius: 4 },
	{ label: "交付中", color: "#506EE4", type: "solidround", width: "8px", radius: 4 },
	{ label: "已交付", color: "#1DC9B7", type: "solidround", width: "8px", radius: 4 }
])
const tabData = [
	{ label: "月度数据", name: "month" },
	{ label: "季度数据", name: "qtr" },
	{ label: "年度数据", name: "year" }
]
// 学员人数数据图例
const studentNumberTabData = reactive({
	active: "month",
	items: [...tabData]
})
// 学员业绩数据图例
const studentPerformanceTabData = reactive({
	active: "month",
	items: [...tabData]
})

// 学科开班数据图例
const subjectClassOpenTabData = reactive({
	active: "month",
	items: [...tabData]
})

// 学科课耗人数图例
const subjectCostNumberTabData = reactive({
	active: "month",
	items: [...tabData]
})
// 学科课耗课时图例
const subjectCostHourTabData = reactive({
	active: "month",
	items: [
		{ label: "月度数据", name: "month" },
		{ label: "季度数据", name: "qtr" },
		{ label: "年度数据", name: "year" }
	]
})
// 学科课耗金额图例
const subjectCostMoneyTabData = reactive({
	active: "month",
	items: [
		{ label: "月度数据", name: "month" },
		{ label: "季度数据", name: "qtr" },
		{ label: "年度数据", name: "year" }
	]
})

const saleRankingTabData = reactive({
	active: "day",
	items: [
		{ label: "日排名", name: "day" },
		{ label: "周排名", name: "week" },
		{ label: "月排名", name: "month" },
		{ label: "年排名", name: "year" }
	]
})

// 学员人数数据
const tplStudentNumberBar = computed(() => {
	const options = {
		color: ["#506EE4", "#FF7070", "#1DC9B7", "#FF7070"],
		tooltip: {
			trigger: "axis",
			borderColor: "#FF7070", // 修改字体颜色
			formatter: (params) => {
				let result = `${params[0].name}<br>`
				params.forEach((item) => {
					result += `${item.marker} ${item.seriesName} : ${item.value ?? "-"}</br>`
				})
				return result
			}
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "6%",
			top: "10%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			axisLabel: {
				color: "#666",
				fontSize: "12px"
			},
			data: ["化妆", "美容", "美发", "美甲", "商学院"]
		},
		yAxis: {
			type: "value",
			axisLabel: {
				color: "#666666",
				fontSize: "10px"
			}
		},
		series: [
			{
				name: "已成交学员",
				data: [30, 15, 150, 230, 224],
				type: "bar",
				barWidth: 16,
				itemStyle: {
					borderRadius: [8, 8, 0, 0]
				}
			},
			{
				name: "交付中学员",
				data: [150, 230, 224, 218, 135],
				type: "bar",
				barWidth: 16,
				itemStyle: {
					borderRadius: [8, 8, 0, 0]
				}
			},

			{
				name: "已交付学员",
				data: [150, 230, 224, 218, 135],
				type: "line",
				symbolSize: 8,
				lineStyle: {
					width: 3
				}
			}
		]
	}
	return options
})
// 学员业绩数据
const tplStudentPerformanceLine = computed(() => {
	const options = {
		color: ["#506EE4", "#FF7070", "#1DC9B7"],
		tooltip: {
			trigger: "axis",
			borderColor: "#FF7070",
			formatter: (params) => {
				let result = `${params[0].name}<br>`
				params.forEach((item) => {
					result += `${item.marker} ${item.seriesName} : ${item.value ?? "-"}</br>`
				})
				return result
			}
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "6%",
			top: "10%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			axisLabel: {
				color: "#666",
				fontSize: "12px"
			},
			data: ["化妆", "美容", "美发", "美甲", "商学院"]
		},
		yAxis: {
			type: "value",
			axisLabel: {
				color: "#666666",
				fontSize: "10px"
			}
		},
		series: [
			{
				name: "已成交学员",
				data: [230, 224, 10, 30, 150],
				type: "line",
				smooth: true,
				showSymbol: false,
				lineStyle: {
					width: 3 //折线宽度
				}
			},
			{
				name: "交付中学员",
				data: [110, 150, 230, 224, 30],
				type: "line",
				smooth: true,
				showSymbol: false,
				lineStyle: {
					width: 3 //折线宽度
				}
			},
			{
				name: "已交付学员",
				data: [135, 147, 260, 218, 135],
				type: "line",
				smooth: true,
				showSymbol: false,
				lineStyle: {
					width: 3 //折线宽度
				}
			}
		]
	}
	return options
})
// 学科开班班级数
const tplSubjectOpenClassLine = computed(() => {
	const options = {
		color: ["#FF7070", "#506EE4", "#1DC9B7"],
		title: {
			text: "班级数",
			right: "3%",
			top: "2%",
			textStyle: {
				fontSize: 14,
				fontWeight: "bold",
				color: "#666"
			}
		},
		tooltip: {
			trigger: "axis",
			borderColor: "#FF7070",
			formatter: (params) => {
				let result = `${params[0].name}<br>`
				params.forEach((item) => {
					result += `${item.marker} ${item.seriesName} : ${item.value ?? "-"}</br>`
				})
				return result
			}
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "6%",
			top: "20%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			axisLabel: {
				color: "#666",
				fontSize: "12px"
			},
			data: ["化妆", "美容", "美发", "美甲", "商学院"]
		},
		yAxis: {
			type: "value",
			axisLabel: {
				color: "#666666",
				fontSize: "10px"
			}
		},
		series: [
			{
				name: "计划开班",
				data: [230, 224, 10, 30, 150],
				type: "line",
				symbolSize: 8,
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "#ffb1b2" },
						{ offset: 1, color: "#fff3f3" }
					])
				},
				lineStyle: {
					width: 3
				}
			},
			{
				name: "正在开班",
				data: [110, 150, 230, 224, 30],
				type: "line",
				symbolSize: 8,

				lineStyle: {
					width: 3
				}
			},
			{
				name: "已结业班级",
				data: [135, 147, 260, 218, 135],
				type: "line",
				symbolSize: 8,
				lineStyle: {
					width: 3
				}
			}
		]
	}
	return options
})
// 学科开班学员人数
const tplSubjectPersonNumberBar = computed(() => {
	const options = {
		color: ["#FF7070", "#506EE4", "#1DC9B7"],
		title: {
			text: "学员人数",
			right: "3%",
			top: "2%",
			textStyle: {
				fontSize: 14,
				fontWeight: "bold",
				color: "#666"
			}
		},
		tooltip: {
			trigger: "axis",
			borderColor: "#FF7070",
			formatter: (params) => {
				let result = `${params[0].name}<br>`
				params.forEach((item) => {
					result += `${item.marker} ${item.seriesName} : ${item.value ?? "-"}</br>`
				})
				return result
			}
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "6%",
			top: "20%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			axisLabel: {
				color: "#666",
				fontSize: "12px"
			},
			data: ["化妆", "美容", "美发", "美甲", "商学院"]
		},
		yAxis: {
			type: "value",
			axisLabel: {
				color: "#666666",
				fontSize: "10px"
			}
		},
		series: [
			{
				name: "计划开班",
				data: [230, 224, 10, 30, 150],
				type: "bar",
				barWidth: 10,
				itemStyle: {
					borderRadius: [5, 5, 5, 5]
				}
			},
			{
				name: "正在开班",
				data: [110, 150, 230, 224, 30],
				type: "bar",
				barWidth: 10,
				itemStyle: {
					borderRadius: [5, 5, 5, 5]
				}
			},
			{
				name: "已结业班级",
				data: [135, 147, 260, 218, 135],
				type: "bar",
				barWidth: 10,
				itemStyle: {
					borderRadius: [5, 5, 5, 5]
				}
			}
		]
	}
	return options
})
// 学科课耗人数
const tplSubjectCostNumberLine = computed(() => {
	const options = {
		color: ["#FF7070", "#506EE4", "#1DC9B7"],
		title: {
			text: "人数",
			right: "3%",
			top: "-2%",
			textStyle: {
				fontSize: 14,
				fontWeight: "bold",
				color: "#666"
			}
		},
		tooltip: {
			trigger: "axis",
			borderColor: "#FF7070",
			formatter: (params) => {
				let result = `${params[0].name}<br>`
				params.forEach((item) => {
					result += `${item.marker} ${item.seriesName} : ${item.value ?? "-"}</br>`
				})
				return result
			}
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "6%",
			top: "17%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			axisLabel: {
				color: "#666",
				fontSize: "12px"
			},
			data: ["化妆", "美容", "美发", "美甲", "商学院"]
		},
		yAxis: {
			type: "value",
			axisLabel: {
				color: "#666666",
				fontSize: "10px"
			}
		},
		series: [
			{
				name: "总课时",
				data: [230, 224, 10, 30, 150],
				type: "line",
				symbolSize: 8,
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "#ffb1b2" },
						{ offset: 1, color: "#fff3f3" }
					])
				},
				lineStyle: {
					width: 3
				}
			},
			{
				name: "交付中",
				data: [110, 150, 230, 224, 30],
				type: "line",
				symbolSize: 8,

				lineStyle: {
					width: 3
				}
			},
			{
				name: "已交付",
				data: [135, 147, 260, 218, 135],
				type: "line",
				symbolSize: 8,
				lineStyle: {
					width: 3
				}
			}
		]
	}
	return options
})
// 学科课耗课时
const tplSubjectCostHourBar = computed(() => {
	const options = {
		color: ["#FF7070", "#506EE4", "#1DC9B7"],
		title: {
			text: "课时",
			right: "3%",
			top: "-2%",
			textStyle: {
				fontSize: 14,
				fontWeight: "bold",
				color: "#666"
			}
		},
		tooltip: {
			trigger: "axis",
			borderColor: "#FF7070",
			formatter: (params) => {
				let result = `${params[0].name}<br>`
				params.forEach((item) => {
					result += `${item.marker} ${item.seriesName} : ${item.value ?? "-"}</br>`
				})
				return result
			}
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "6%",
			top: "20%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			axisLabel: {
				color: "#666",
				fontSize: "12px"
			},
			data: ["化妆", "美容", "美发", "美甲", "商学院"]
		},
		yAxis: {
			type: "value",
			axisLabel: {
				color: "#666666",
				fontSize: "10px"
			}
		},
		series: [
			{
				name: "总课时",
				data: [230, 224, 10, 30, 150],
				type: "bar",
				barWidth: 10,
				itemStyle: {
					borderRadius: [5, 5, 5, 5]
				}
			},
			{
				name: "交付中",
				data: [110, 150, 230, 224, 30],
				type: "bar",
				barWidth: 10,
				itemStyle: {
					borderRadius: [5, 5, 5, 5]
				}
			},
			{
				name: "已交付",
				data: [135, 147, 260, 218, 135],
				type: "bar",
				barWidth: 10,
				itemStyle: {
					borderRadius: [5, 5, 5, 5]
				}
			}
		]
	}
	return options
})
// 学科课耗金额
const tplSubjectCostMoneyBar = computed(() => {
	const options = {
		color: ["#FF7070", "#506EE4", "#1DC9B7"],
		title: {
			text: "金额",
			right: "3%",
			top: "-2%",
			textStyle: {
				fontSize: 14,
				fontWeight: "bold",
				color: "#666"
			}
		},
		tooltip: {
			trigger: "axis",
			borderColor: "#FF7070",
			formatter: (params) => {
				let result = `${params[0].name}<br>`
				params.forEach((item) => {
					result += `${item.marker} ${item.seriesName} : ${item.value ?? "-"}</br>`
				})
				return result
			}
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "6%",
			top: "20%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			axisLabel: {
				color: "#666",
				fontSize: "12px"
			},
			data: ["化妆", "美容", "美发", "美甲", "商学院"]
		},
		yAxis: {
			type: "value",
			axisLabel: {
				color: "#666666",
				fontSize: "10px"
			}
		},
		series: [
			{
				name: "总课时",
				data: [30, 15, 150, 230, 224],
				type: "bar",
				barWidth: 16,
				itemStyle: {
					borderRadius: [8, 8, 8, 8]
				}
			},
			{
				name: "交付中",
				data: [150, 230, 224, 218, 135],
				type: "bar",
				barWidth: 16,
				itemStyle: {
					borderRadius: [8, 8, 8, 8]
				}
			},

			{
				name: "已交付",
				data: [150, 230, 224, 218, 135],
				type: "line",
				symbolSize: 8,
				lineStyle: {
					width: 3
				}
			}
		]
	}
	return options
})
const handleStudentNumber = (payload) => {
	studentNumberTabData.active = payload.name
}
const handleStudentPerformance = (payload) => {
	studentPerformanceTabData.active = payload.name
}

const handleSubjectClassOpen = (payload) => {
	subjectClassOpenTabData.active = payload.name
}
const handleSubjectCostNumber = (payload) => {
	subjectCostNumberTabData.active = payload.name
}
const handleSubjectCostHour = (payload) => {
	subjectCostHourTabData.active = payload.name
}
const handleSubjectCostMoney = (payload) => {
	subjectCostMoneyTabData.active = payload.name
}
</script>
<style lang="scss">
.teaching-affairs {
	.mt_10 {
		margin-top: 10px;
	}
	.mt_10 {
		margin-top: 10px;
	}
	.ml_10 {
		margin-left: 10px;
	}
	img {
		width: 100%;
		height: 100%;
		display: block;
	}
	padding: 15px;
	min-width: 1400px;
	.teaching-affairs__body {
		width: 100%;
	}
	.teaching-affairs_tab {
		height: 37px;
		display: flex;
		align-items: center;
		padding: 0px 10px;
	}
	.student {
		display: flex;
		.student-number,
		.student-performance {
			width: 50%;
		}
	}
	.subject {
		display: flex;

		.subject-open {
			width: 38%;
		}
		.subject-class-cost {
			width: 62%;
			.teaching-affairs_tab {
				height: auto;
				display: flex;
				align-items: center;
				padding: 8px 10px 0px;
			}
			.subject-class-cost__top {
				display: flex;
				.subject-class-cost__number,
				.subject-class-cost__hour {
					width: 50%;
				}
			}
		}
	}
}
</style>
